<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">社会关系</h3>
      </div>
      <div class="box-body">
        <el-form :model="editsocial" status-icon :rules="socialRules" ref="editsocial" label-width="160px">
          <div class="col-sm-6">
            <el-form-item label="称谓" prop="title" :required="true">
              <el-input :disabled="!isEditable" v-model="editsocial.title" placeholder="请输入称谓" auto-complete="off"></el-input>
            </el-form-item>
          </div>
           <div class="col-sm-6">
            <el-form-item label="姓名" prop="name" :required="true">
              <el-input :disabled="!isEditable" v-model="editsocial.name" placeholder="请输入姓名" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="出生年月" >
              <MyDatePicker :editable="isEditable" v-bind:date="editsocial.birthday" @timeChanged="(time)=>this.editsocial.birthday =time">
              </MyDatePicker>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="政治面貌">
              <Policy ref='socialpolicy' :editable="isEditable" :selectedPolicy='editsocial.policy' @policychange="val => editsocial.policy = val"></Policy>
            </el-form-item>
          </div>
          <div class="col-sm-12">
            <el-form-item label="工作单位(就读学校)">
              <el-input :disabled="!isEditable" v-model="editsocial.company" placeholder="请输入工作单位" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="现任职务">
              <el-input :disabled="!isEditable" v-model="editsocial.position" placeholder="请输入现任职务" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="目前状态">
                <el-select :disabled="!isEditable" v-model="editsocial.workstatus" @change="value=>editsocial.workstatus = value">
                  <el-option v-for="item in this.workstatuses" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>
          </div>
          <div class="col-sm-6">
            <el-form-item label="所属系统">
              <el-input :disabled="!isEditable" v-model="editsocial.system" placeholder="请输入所属系统" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-12">
            <el-form-item label="备注">
              <el-input :disabled="!isEditable" type="textarea" :rows="2" v-model="editsocial.comment" placeholder="请输入备注信息"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import MyDatePicker from '../../mycomponents/common/MyDatePicker'
  import Policy from '../../mycomponents/common/Policy'
  export default {
    name: 'socialForm',
    props: ['social', 'editable'],
    data(router) {
      return {
        isEditable: false,
        editVisiable: false,
        editsocial: {
          title: '',
          name: '',
          birthday: '',
          policy: 1,
          company: '',
          position: '',
          workstatus: 1,
          system: '',
          comment: ''
        },
        workstatuses: [],
        socialRules: {
          title: [{
            required: true,
            message: '请输入称谓',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      if (this.social) {
        this.editsocial = this.social
      }
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      this.workstatuses = this.$store.state.sysconfigs.workstatuses
    },
    components: {
      MyDatePicker,
      Policy
    },
    methods: {
      getData: function() {
        var validRes = true
        this.$refs.editsocial.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('error submit!!');
            validRes = false
            return false;
          }
        });
        console.log(" editsocial:", JSON.stringify(this.editsocial));
        if (!validRes) {
          return null
        }
        return this.editsocial;
      }
    }
  }
</script>

